<template>
 <div>
   <h1>Input Events 的使用</h1>
   <el-input v-model="username" @blur="blurEvent" @focus="focusEvent"></el-input>
   <!-- 只有当值改变了，失去焦点或者按下回车才会触发事件  -->
   <el-input v-model="username" @change="changeEvent"></el-input>
   <el-input v-model="username" @input="inputEvent"></el-input>
   <el-input v-model="username" @clear="clears" clearable @input="inputEvent"></el-input>
 </div>
</template>

<script>
  export default {
    name: "InputEvents",
    data() {
      return {
        username: ''
      }
    },
    methods: {
      blurEvent() {
        console.log("失去焦点");
      },
      focusEvent() {
        console.log("获得焦点");
      },
      changeEvent(value) {
        console.log("输入框失去焦点或用户按下了回车 ");
        console.log("Value: "+value);
      },
      inputEvent(value) {
        console.log("Input 值改变 ");
        console.log("Value: "+value);
      },
      clears() {
        console.log("清除");
      }
    }
}
</script>

<style scoped>

</style>
